<template>
  <view class="user-box">
	<u-toast ref="uToast"></u-toast>
    <u-modal :show="showModal"
             :content='content'
             @cancel="cancelClick"
             showCancelButton
             @confirm="confirmClick"
             confirmColor="#ff0e1e"></u-modal>
    <tabbar :value1="2"></tabbar>
    <view class="top">
      <view class="top-content">
        <image :src="token?avatar:require('@/static/下载.png')"
               mode="aspectFit"></image>
        <text @tap="login"
              v-if="!token">点击登录</text>
			  <view v-else style="display: inline-block;">
			  	<text @tap="exit">{{token.name}}</text>
				<image :src="vip" v-if="token.vip" style="width: 50px; height: 50px;"></image>
			  </view>
        
        <text class="gt">&gt;</text>
      </view>
    </view>
    <u-grid border @click="gridClick">
      <u-grid-item :customStyle="{height:220+'rpx'}"
                   v-for="item,index in navList"
                   :index="index"
                   :key="index">
        <u-icon :name="item.icon"
                :customStyle="{paddingTop:20+'rpx'}"
                :size="22"></u-icon>
        <text class="grid-text">{{item.name}}</text>
      </u-grid-item>
    </u-grid>
    <my-login :isShow="showLogin"
              @closelogin="closeLogin"></my-login>
	<!-- 广告组件 -->
	<my-ad @close="getVip" v-if="showAd"></my-ad>
  </view>
</template>

<script>
import login from '@/components/my-login/my-login.vue';
import ad from '@/components/ad/ad.vue'
	export default {
		components:{
			'my-login':login,
			'my-ad':ad,
		},
		data() {
			return {
				avatar:'http://192.168.50.16:8083/image/avatar/01.jpeg',
				vip:'http://192.168.50.16:8083/image/vip/vip.png',
				navList:[
					{
						icon:'integral',
						name:'会员',
					},{
						icon:'gift',
						name:'兑换',
					},{
						icon:'lock',
						name:'机密',
					},{
						icon:'star',
						name:'收藏',
					},{
						icon:'hourglass',
						name:'历史',
					},{
						icon:'red-packet',
						name:'加入我们',
					},{
						icon:'question',
						name:'反馈',
					},{
						icon:'more-dot-fill',
						name:'更多',
					}
				],
				showLogin:false,
				showModal:false,
				showAd:false,
				content:'确认退出'
			}
		},
		onShow() {
		},
		computed:{
			token(){
				let token = uni.getStorageSync('token')
				if(token){
					return JSON.parse(token)
				}else{
					return false
				}
			}
		},
		methods: {
			login(){
				this.showLogin = true
			},
			closeLogin(){
				this.showLogin = false
			},
			exit(){
				this.content = "确认退出"
				this.showModal = true
			},
			confirmClick(){
				if(this.content=="确认退出"){
					uni.removeStorageSync('token')
					this.showModal = false
					uni.navigateBack({delta:0})
				}else if(this.content=="看30S广告获取VIP"){
					this.showAd = true
					this.showModal = false
				}
				
			},
			cancelClick(){
				this.showModal = false
			},
			showToast(params) {
				this.$refs.uToast.show({
					...params,
					complete() {
						params.url && uni.navigateTo({
							url: params.url
						})
					}
				})
			},
			getVip(){
				this.showAd = false
				let tk = {
					...this.token,
					vip:true,
				} 
				uni.setStorageSync('token',JSON.stringify(tk))
				uni.navigateBack({delta:0})
			},
			gridClick(index){
				if(index===0){
					if(this.token){
						if(this.token.vip){
							this.showToast({
								message:'一天只能领取一次'
							})
							return
						}
						this.content = "看30S广告获取VIP"
						this.showModal = true
					}else{
						this.showToast({
							message:'请先登录'
						})
					}
				}else{
					this.showToast({
						message:'该功能开发中，请持续关注官网动态',
						icon:'info'
					})
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
// rgb(208,88,124)
.grid-text {
  font-size: 14px;
  color: #909399;
  padding: 10rpx 0 20rpx 0rpx;
}
.top {
  background-color: rgba(208, 88, 124, 0.1);
  width: 100%;
  padding: 15px 10px;
  .top-content {
    image {
      width: 50px;
      height: 50px;
      border-radius: 25px;
      vertical-align: middle;
    }
    text {
      padding: 0 15px;
      color: #909399;
    }
    .gt {
      margin-top: 10px;
      font-family: '黑体';
      float: right;
      font-size: 18px;
    }
  }
}
</style>
